const BAM = wx.getBackgroundAudioManager();
let count = -1;
let areaWidth = 0; // 滑块所在区域的宽度
let viewWidth = 0; // 滑块的宽度
let duration = 0; // 音乐的总时长
let x, p; // 人为移动滑块时，计算出滑块的位置和进度条的位置
let flag = false; // 表示是否正在拖拽
Component({
    properties: {
        isSame: Boolean
    },
    // 组件所在页面的生命周期
    lifetimes: {
        ready() {
            if (this.properties.isSame) {
                let {
                    min,
                    second
                } = this.formatTime(duration)
                this.setData({
                    totalTime: min + ":" + second
                })
            }
            this.getInfoMation();
            this.bindBamEvent();
        }
    },
    data: {
        startTime: "00:00", // 音乐的开始时间
        totalTime: "00:00", // 音乐的总时长
        moveViewX: 0, // 滑块的位置
        percent: 0, // 进度条的位置
    },
    methods: {
        // 操作DOM
        getInfoMation() {
            const query = wx.createSelectorQuery().in(this);
            query.select(".movable-area").boundingClientRect();
            query.select(".movable-view").boundingClientRect();
            query.exec(function (res) {
                console.log("res===>", res);
                // res[0].width 表示可滑动区域的宽度
                // res[1].width 表示滑动小圆点的宽度
                areaWidth = res[0].width
                viewWidth = res[1].width
            })
        },
        // 获取音乐相关的信息
        bindBamEvent() {
            BAM.onCanplay(async () => {
                // 得到音乐时长
                // console.log(BAM.duration);
                duration = BAM.duration;
                if (!duration) {
                    let promsie = new Promise((resolve, reject) => {
                        setTimeout(() => {
                            resolve(BAM.duration)
                        })
                    })
                    duration = await promsie;
                }
                let {
                    min,
                    second
                } = this.formatTime(duration)
                this.setData({
                    totalTime: min + ":" + second
                })
            })
            BAM.onTimeUpdate(() => {
                // console.log("音乐正在播放~");
                // 得到音乐播放的当前时间
                let currentTime = BAM.currentTime;
                let prevSec = currentTime.toString().split(".")[0]
                let {
                    min,
                    second
                } = this.formatTime(currentTime);
                // 下面的代码是做降频处理
                if (prevSec != count) {
                    if (!flag) {
                        this.setData({
                            startTime: min + ":" + second,
                            moveViewX: (areaWidth - viewWidth) * currentTime / duration,
                            percent: currentTime / duration * 100
                        })
                        this.triggerEvent("timeUpdate", {
                            currentTime
                        })
                    }
                    count = prevSec;
                }
            })
            BAM.onEnded(() => {
                this.triggerEvent("finish")
            })
        },
        // 格式化时间
        formatTime(data) {
            let min = Math.floor(data / 60);
            let second = Math.floor(data % 60);
            min = min < 10 ? "0" + min : min;
            second = second < 10 ? "0" + second : second;
            return {
                min,
                second
            }
        },
        // 拖拽滑块
        onchange(e) {
            if (e.detail.source == "touch") {
                x = e.detail.x;
                p = e.detail.x / (areaWidth - viewWidth) * 100
                flag = true;
            }
        },
        // 松开滑块
        ontouchend() {
            this.setData({
                moveViewX: x,
                percent: p
            })
            BAM.seek(duration * p / 100)
            flag = false;
        }
    }
})